import React, {useState} from 'react';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {View, Text, StyleSheet} from 'react-native';
import {
  Form,
  Field,
  Button,
  Toast,
  Checkbox,
} from '@fruits-chain/react-native-xiaoshu';
import Video from 'react-native-video';

import {userApi} from '../../api';
import {activeColor} from '../../common/color';
import {p} from '../../utils/pxToDp';

export default () => {
  const navigation = useNavigation<StackNavigationProp<any>>();

  const [flag, setFlag] = useState(false);

  const [form] = Form.useForm();

  const login = async values => {
    if (!flag)
      return Toast({
        message: '请先阅读并同意用户协议',
        forbidPress: true,
      });
    const res = await userApi.loginApi(values);
    console.log('res', res);

    if (res.error)
      return Toast({
        message: res.error,
        forbidPress: true,
      });

    console.log('Res', res.data.token);
    Toast({
      message: '登录成功',
      forbidPress: true,
    });

    setTimeout(() => {
      navigation.navigate('Main');
    }, 500);
  };

  return (
    <View style={styles.contentLayout}>
      {/* 背景视频 */}
      <Video
        source={{
          uri: 'https://img02.mockplus.cn/video/2022-05-09/14bafd30-cf68-11ec-bd81-370d738b3d8a.mp4',
        }}
        style={styles.videoBackground}
        repeat={false}
        muted={false}
        resizeMode="cover"
      />

      {/* 头部内容 */}
      <View
        style={{backgroundColor: 'rgba(0,0,0,0.6)', height: '100%', flex: 1}}>
        <View style={styles.topLayout}>
          <Text style={styles.topTitle}>登录后更精彩</Text>
          <Text style={styles.topLabelText}>
            与全世界精彩的经历、人和故事相遇
          </Text>
        </View>

        {/* 登录表单 */}
        <View style={{marginHorizontal: p(30)}}>
          <Form form={form} onFinish={values => login(values)}>
            <Form.Item
              name="user_name"
              rules={[
                {
                  required: true,
                  message: '请输入账号',
                },
              ]}
              validateTrigger="onEndEditing">
              <Field.TextInput
                title="账号："
                placeholder="请输入账号"
                titleTextStyle={{color: '#fff'}}
                textAlign="left"
                textInputStyle={{color: '#fff'}}
                clearable
                style={{backgroundColor: 'transparent'}}
              />
            </Form.Item>
            <Form.Item
              name="pass_word"
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
              ]}>
              <Field.TextInput
                secureTextEntry
                title="密码："
                titleTextStyle={{color: '#fff'}}
                textAlign="left"
                textInputStyle={{color: '#fff'}}
                placeholder="请输入密码"
                clearable
                style={{backgroundColor: 'transparent', marginTop: p(8)}}
              />
            </Form.Item>
            <Button
              text="确认登录"
              type="primary"
              color={activeColor}
              textColor="#000"
              style={{marginTop: p(30), height: p(50), borderRadius: p(25)}}
              onPress={form.submit}
            />
          </Form>
        </View>

        {/* 确认协议 */}
        <View style={styles.bottomLayout}>
          <Checkbox
            label="我已阅读并同意《探途用户协议》"
            labelTextStyle={{color: '#fff'}}
            activeColor={activeColor}
            onChange={v => {
              setFlag(v);
            }}
          />
          {/* <Text style={{marginLeft: 6 ,color: '#fff'}}>我已阅读并同意《探途用户协议》</Text> */}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  videoBackground: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },

  contentLayout: {
    flex: 1,
  },

  // 头部文字
  topLayout: {
    marginTop: p(120),
    marginBottom: p(80),
    marginHorizontal: p(30),
  },
  topTitle: {
    marginBottom: p(6),
    color: '#fff',
    fontSize: p(28),
    fontWeight: 'bold',
  },
  topLabelText: {
    color: '#fff',
    fontSize: p(14),
  },

  bottomLayout: {
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    width: '80%',
    marginHorizontal: p(30),
    bottom: p(52),
  },
});
